<template>
    <div class="table-page-search-wrapper">
        <div class="table-operator">
            <a-button shape="round" v-if="isShowButton" @click="openCommit" type="primary" icon="arrow-up">提交</a-button>
            <a-button icon="rest" shape="round" v-if="isCancel" @click="cancel" type="danger">撤销</a-button>
        </div>
        <a-spin :spinning="confirmLoading">
            <LForm ref="empDepartTaskForm" :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol"
                :wrapperCol="wrapperCol"></LForm>
        </a-spin>
        <div style="height:30px;"></div>
        <div style="height:40px;">审批详情</div>
        <div>
            <a-timeline v-if="approvalOpinions.length > 0">
                <a-timeline-item v-for="(opinion, idx) in approvalOpinions" :key="idx">
                    <a-icon v-if="opinion.isPass == '1'" slot="dot" type="check-circle" style="font-size: 16px;" />
                    <a-icon v-else slot="dot" type="close-circle" style="font-size: 16px;" />
                    <a-row>
                        <a-col :span="2">
                            <template v-if="opinion.userAvatar">
                                <a-avatar size="large"
                                    :src="defaultSettings.fileServer + '/' + opinion.userAvatar"></a-avatar>
                            </template>
                            <template v-else>
                                <a-avatar size="large" :src="require('/src/assets/default_photo.png')"></a-avatar>
                            </template>
                            <div>{{ opinion.userName }}</div>
                        </a-col>
                        <a-col :span="22">
                            {{ opinion.time }}
                            <div>{{ opinion.message }}</div>
                            <div>
                                <template v-if="opinion.userSign">
                                    <img style="width:80px;" :src="defaultSettings.fileServer + '/' + opinion.userSign" />
                                </template>
                            </div>
                        </a-col>

                    </a-row>

                </a-timeline-item>
            </a-timeline>
        </div>
        <commit-modal ref="contractCommit" @handleOk="commitFlow" @handlerChange="handlerChange"></commit-modal>
        <ExtDrawer ref="ExtDrawer" @close="refresh('list')"></ExtDrawer>
        <ExtModal ref="ExtModal" @close="refresh('list')"></ExtModal>
    </div>
</template>

<script>
import LForm from '@/components/lt/form/LForm'
import pick from 'lodash.pick'
import lodash from 'lodash'
import request from '@/utils/request'
import notification from 'ant-design-vue/es/notification'
import commitModal from '@/views/flowable/view/commitModal'
import { Modal } from 'ant-design-vue'
import defaultSettings from '@/config/defaultSettings'
import ExtDrawer from '@/views/system/codeGenerator/ExtDrawer'
import ExtModal from '@/views/system/codeGenerator/ExtModal'
import LTable from '@/components/lt/LTable'
import { SysMixin } from '@/mixins/SysMixin'
export default {
    name: 'empDepartTaskForm',
    components: { LForm, commitModal, LTable, ExtDrawer, ExtModal },
    mixins: [SysMixin],
    props: {
        componentParam: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            defaultSettings,
            confirmLoading: false,
            isShowButton: true,
            isCancel: false,
            visible: false,
            description: null,//环节说明，用来控制现实内容
            formData: {},
            taskInfo: {},
            mostColumns: 1,
            labelCol: { sm: { span: 6 } },
            wrapperCol: { sm: { span: 18 } },
            formAttributes: {
                type: '',
                formItems: [
                    {
                        title: '离职审批',
                        columns: 1,
                        fields: [
                            { field: 'orgNo', label: '组织', component: 'treeSelect', disabled: true, dictCode: defaultSettings.数据字典.组织下拉树, rules: [{ required: false, message: '不能为空!' }] },
                            { field: 'empName', label: '姓名', component: 'input', disabled: true, rules: [{ required: false, message: '不能为空' }] },
                            { field: 'empNo', label: '工号', component: 'input', disabled: true, rules: [{ required: false, message: '不能为空!' }] },
                            { field: 'entryDate', label: '入职日期', component: 'date', disabled: true, rules: [{ required: false, message: '不能为空' }] },
                            { field: 'empGw', label: '岗位', component: 'select', disabled: true, dictCode: defaultSettings.数据字典.岗位, rules: [{ required: false, message: '不能为空' }] },
                            { field: 'departReason', label: '离职原因', component: 'textarea', disabled: true },

                        ]
                    },
                ]
            },
            approvalOpinions: [],
        }
    },
    watch: {
        'componentParam': {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                if (newV) {
                    this.taskInfo = newV
                    this.formData = {}
                    this.$nextTick(() => {
                        this.$refs['empDepartTaskForm'].getForm().resetFields()
                        this.getFormData()
                    })
                } else {
                    this.taskInfo = {}
                    this.formData = {}
                    this.$nextTick(() => {
                        this.$refs['empDepartTaskForm'].getForm().resetFields()
                    })
                }

            }
        }
    },
    methods: {

        commitFlow(data) {
            let param = {}
            param = Object.assign({}, param, this.formData)
            param.templateId = this.taskInfo.templateId
            param.taskId = this.taskInfo.id
            if (data) {
                param = Object.assign({}, param, data)
            }
            this.confirmLoading = true
            request({ url: '/WxEmpDepartController/commit', method: 'post', data: param }).then(res => {
                if (res.success) {
                    this.$message.success(res.message);
                    this.isShowButton = false
                    this.isCancel = false
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误" })
                }
            }).finally(() => {
                this.confirmLoading = false
            })
        },
        openCommit() {

            if (!this.taskInfo) {
                notification.error({ message: '系统提示', description: "当前任务环节信息不存在" })
                return false
            }
            this.$refs['contractCommit'].open(this.taskInfo, this.formData)
        },
        getFormData() {
            this.confirmLoading = true
            request.get('/WxEmpDepartController/queryByInstanceId', { params: { instanceId: this.taskInfo.procInstId } }).then(res => {
                if (res.success) {
                    this.formData = lodash.omit(res.result, 'approvalOpinions')
                    this.$refs['empDepartTaskForm'].getForm().setFieldsValue(pick(res.result, 'orgNo', 'empName', 'empNo', 'entryDate', 'empGw', 'empPhone', 'empSex', 'empPolity', 'empCardCode', 'departReason'))
                    this.approvalOpinions = res.result.approvalOpinions
                    //显示撤销按钮
                    if (this.formData.applicationEmpNo == this.taskInfo.assignee) {
                        this.isCancel = true
                    } else {
                        this.isCancel = false
                    }
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误" })
                }
            }).finally(() => {
                this.confirmLoading = false
            })
        },
        close() {
            this.visible = false;
            this.$emit('close');

        },
        handlerChange() {

        },
        cancel() {
            let that = this
            Modal.confirm({
                title: "系统提醒",
                content: "撤销后数据将被删除，确定撤销?",
                onOk: () => {
                    that.confirmLoading = true
                    request.get('/WxEmpDepartController/cancel', { params: { instanceId: this.taskInfo.procInstId } }).then((res) => {
                        if (res.success) {
                            that.isShowButton = false
                            that.isCancel = false
                            that.close()
                            that.$message.success(res.message);
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false
                        that.setDisabled()
                    })
                },
                onCancel() { }
            })
        },
    }
}

</script>


